<template>
  <div class="content-pan-topbar">
    <div class="topbar-btns">
      <slot name="btns">
        <el-button type="primary" size="small" class="primary-btn" v-if="$store.state.curRouteCntLeft !== '全部文件'" @click="btnClick('上传')">
          <i class="el-icon-upload2" style="font-size: 14px;"></i> 上传
        </el-button>
        <el-button type="default" size="small" class="ow-button__default" v-if="$store.state.curRouteCntLeft === '全部文件'" @click="btnClick('新建')">
          <i class="el-icon-folder-add" style="font-size: 14px;"></i> 新建
        </el-button>
        <el-button type="default" size="small" class="ow-button__default" disabled @click="btnClick('离线下载')">
          <i class="el-icon-download" style="font-size: 14px;"></i> 离线下载
        </el-button>
        <el-button type="default" size="small" class="ow-button__default" disabled @click="btnClick('推送到设备')">
          <i class="el-icon-mobile" style="font-size: 14px;"></i> 推送到设备
        </el-button>
      </slot>
    </div>
    <div class="topbar-right">
      <el-input v-model="searchInput" class="topbar-right-search" placeholder="搜索您的文件" size="small" @keyup.enter.native="searchTableData">
        <el-button slot="append" icon="el-icon-search" @click="searchTableData"></el-button>
      </el-input>
      <slot name="extra-icon">
        <el-dropdown @command="changeSort">
          <span class="el-dropdown-link">
            <i class="el-icon-sort search-icon"></i>
          </span>
          <el-dropdown-menu slot="dropdown" class="ow-dropdown">
            <el-dropdown-item
              command="fileName"
              :style="{ color: activeSort === 'fileName' ? '#66b1ff' : '#606266' }"
            >文件名</el-dropdown-item>
            <el-dropdown-item
              command="fileSize"
              :style="{ color: activeSort === 'fileSize' ? '#66b1ff' : '#606266' }"
            >文件大小</el-dropdown-item>
            <el-dropdown-item
              command="updateDate"
              :style="{ color: activeSort === 'updateDate' ? '#66b1ff' : '#606266' }"
            >修改日期</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span @click="switchTableMode">
          <i class="el-icon-menu search-icon" v-show="curIsTable"></i>
          <i class="el-icon-s-operation search-icon" v-show="!curIsTable"></i>
        </span>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ContentPanTopbar',
  data() {
    return {
      searchInput: '',
      activeSort: 'fileName',
      curIsTable: true,
    }
  },
  methods: {
    btnClick(item) {
      this.$bus.$emit('tableTopBarClick', item);
    },
    searchTableData() {
      this.$bus.$emit('tableDataSearch', this.searchInput);
    },
    changeSort(command) {
      this.activeSort = command;
      this.$bus.$emit('tableDateSort', command);
    },
    switchTableMode() {
      this.curIsTable = !this.curIsTable;
      this.$bus.$emit('tableModeSwitch', this.curIsTable);
    }
  }
}
</script>

<style lang="less">
.content-pan-topbar {
  width: 100%;
  height: 33px;
  display: flex;
  justify-content: space-between;

  .primary-btn {
    &.el-button--small, .el-button--small.is-round {
      padding: 8px 15px;
    }
  }

  .topbar-right {
    .topbar-right-search {
      width: 280px;
    }

    .el-input-group--append .el-input__inner {
      border-top-left-radius: 16px;
      border-bottom-left-radius: 16px;
      background-color: #f1f2f4;
    }

    .el-input-group--prepend .el-input__inner, .el-input-group__append {
      border-top-right-radius: 16px;
      border-bottom-right-radius: 16px;
    }

    .search-icon {
      color: #687176;
      font-size: 22px;
      vertical-align: middle;
      margin: 6px;
      cursor: pointer;
      &:hover {
        opacity: .8;
      }
    }
  }
}
</style>